---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro";
import Breadcrumb from '@components/breadcrumb.vue';
import img from '@assets/qualityControl/image.png'


// Filter team entries with 'draft: false' & date before current date
const publishedTeamMembers = await getCollection("team", ({ data }) => {
  return !data.draft && data.publishDate < new Date();
});

const itemList= [
    {
    title: 'A:遵守适用的国家和地方现行有关环境法律、法规',
},
{
    title: 'B:从材料、设备、物资的采购，产品服务全过程实行污染预防，尽量减少各种污染物的产生和排放，保障员工健康',
},
{
    title: 'C:逐步完善环境设施，不断提高清洁生产水平',
},
{
    title: 'D:提高全员环境意识，改善工作环境，着力宣传环境方针、环境目标，强化全员环境行为',
},
{
    title: 'E:定期对公司环境情况进行评价，使公司环境管理得到持续改',
},
{
    title: 'F:加强污染防治，努力实现污染物处理全面达标，排量递减。',
},
{
    title: 'G:对于超标的工业排出物（废水，废气，废渣 ）及噪音等，制定改善计划，采取措施，使其符合相关领域的特定要求',
},
]


// 1	铅	≤1000ppm
// 16	多氯联苯、鑫氯化萘、多氯三联苯	禁止含有
// 2	镉	≤100ppm
// 17	短链型氯代烷烃	禁止含有
// 3	汞	≤1000ppm
// 18	其他有机氯化合物	禁止含有
// 4	六价铬	≤1000ppm
// 19	有机锡化合物	禁止含有
// 5	多溴联苯	≤1000ppm
// 20	二丁基锡化合物	禁止含有
// 6	多溴联苯醚	≤1000ppm
// 21	二辛基锡化合物	禁止含有
// 7	其他有机溴化合物	禁止含有	22	石棉	禁止含有
// 8	特定偶氮化合物	禁止含有	23	氢氟碳化合物、全氟化碳	禁止含有
// 9	甲醛	禁止含有	24	全氟辛烷磺酸	禁止含有
// 10	聚氯乙烯以及聚氯乙烯混合物	禁止含有	25	特定苯并三氮唑	禁止含有
// 11	氧化铍	禁止含有	26	二氯化钴	禁止含有
// 12	铍青铜	禁止含有	27	臭氧层波坏物质	禁止含有
// 13	特定邻苯二甲酸盐	禁止含有	28	富马酸二甲酯	禁止含有
// 14	溴	≤900ppm
// 29	溴和氯	≤1500ppm
// 15	氯 ≤900ppm
const itemList1= [
    {title: '铅', des: '≤1000ppm'},
    {title: '镉', des: '≤100ppm'},
    {title: '汞', des: '≤1000ppm'},
    {title: '六价铬', des: '≤1000ppm'},
    {title: '多溴联苯', des: '≤1000ppm'},
    {title: '多溴联苯醚', des: '≤1000ppm'},
    {title: '溴', des: '≤900ppm'},
    {title: '氯', des: '≤900ppm'},
    {title: '溴和氯', des: '≤1500ppm'},
    {title: '多氯联苯、鑫氯化萘、多氯三联苯', des: '禁止含有'},
    {title: '短链型氯代烷烃', des: '禁止含有'},
    {title: '其他有机氯化合物', des: '禁止含有'},
    {title: '有机锡化合物', des: '禁止含有'},
    {title: '二丁基锡化合物', des: '禁止含有'},
    {title: '二辛基锡化合物', des: '禁止含有'},
    {title: '其他有机溴化合物', des: '禁止含有'},
    {title: '石棉', des: '禁止含有'},
    {title: '特定偶氮化合物', des: '禁止含有'},
    {title: '氢氟碳化合物、全氟化碳', des: '禁止含有'},
    {title: '甲醛', des: '禁止含有'},
    {title: '全氟辛烷磺酸', des: '禁止含有'},
    {title: '聚氯乙烯以及聚氯乙烯混合物', des: '禁止含有'},
    {title: '特定苯并三氮唑', des: '禁止含有'},
    {title: '氧化铍', des: '禁止含有'},
    {title: '二氯化钴', des: '禁止含有'},
    {title: '铍青铜', des: '禁止含有'},
    {title: '臭氧层波坏物质', des: '禁止含有'},
    {title: '特定邻苯二甲酸盐', des: '禁止含有'},
    {title: '富马酸二甲酯', des: '禁止含有'}
];

---

<Layout title="About">
  <Container>
    <Breadcrumb client:only/>
   <div class="content">
<div class="text-[30px] text-333 font-[500]">环境管理</div>
<div class="text-[14px] text-333 mt-[10px]">艾诺作为一家有责任的企业，坚持走可持续发展之路，倡导绿色环保思想，遵守法律法规，从产品设计、使用、报废和回收的全过程中，实行污染预防和持续改进。</div>
<div class="text-[20px] text-333 font-[500] mt-[30px] mb-[20px]">我们承诺</div>
<div class="grid grid-cols-3">
    {
        itemList.map(item => (
            <div class="py-[10px] px-[50px] text-[16px] text-333 box-border">{item.title}</div>
        ))
    }
    <div class="col-span-2 text-712C2F text-center flex justify-center items-center cursor-pointer hover:underline"> 环境管理体系证书.pdf</div>
  </div>
  <div class="text-[30px] text-333 font-[500] mt-[30px] mb-[20px]">ROHS声明</div>
<div class="text-[14px] text-333 mt-[10px]">艾诺承诺提供的产品含包材、辅材均符合以下表格中害物质一览表中要求：如未能符合上述要求，本公司愿承担因此所引起的相关赔偿及法律责任。且此声明书除经明文设定期限或贵公司书面同意之撤回解除外，其后凡与贵公司之交易、打样等行为皆为本声明之有效范围，公司声明文件如下：</div>

<div class="grid grid-cols-3 text-[14px] text-333 list2">
    <ul class="mx-[1px] rounded-[2px] overflow-hidden">
        <li class="flex justify-between items-center py-[10px] px-[50px] text-white box-border bg-712C2F">
            <div>序号</div>
            <div>ROHS物质名称</div>
            <div>标准</div>
        </li>
        {itemList1.slice(0, 12).map((item, index) => (
            <li class="flex justify-between items-center py-[10px] px-[50px] text-333 box-border">
                <div>{index}</div>
                <div>{item.title}</div>
                <div>{item.des}</div>
            </li>
        ))}
    </ul>

    <ul  class="mx-[1px] rounded-[2px]">
        <li class="flex justify-between items-center py-[10px] px-[50px] text-white box-border bg-712C2F">
            <div>序号</div>
            <div>ROHS物质名称</div>
            <div>标准</div>
        </li>
        {itemList1.slice(13, 25).map((item, index) => (
            <li class="flex justify-between items-center py-[10px] px-[50px] text-333 box-border">
                <div>{index}</div>
                <div>{item.title}</div>
                <div>{item.des}</div>
            </li>
        ))}
    </ul>
    <ul  class="mx-[1px] rounded-[2px]">
        <li class="flex justify-between items-center py-[10px] px-[50px] text-white box-border bg-712C2F">
            <div>序号</div>
            <div>ROHS物质名称</div>
            <div>标准</div>
        </li>
        {itemList1.slice(25, 32).map((item, index) => (
            <li class="flex justify-between items-center py-[10px] px-[50px] text-333 box-border">
                <div>{index}</div>
                <div>{item.title}</div>
                <div>{item.des}</div>
            </li>
        ))}
        <li class="hover:underline text-712C2F text-center pt-[100px] cursor-pointer" style="border:none">
            ROHS承诺书.pdf
        </li>
    </ul>
    </div>


    <div class="text-[30px] text-333 font-[500] mt-[30px]">无金属冲突声明</div>
    <div class="text-[14px] text-333 mt-[10px] mb-[50px]">冲突金属是指来自于民主刚果共和国及其邻国（安哥拉、布隆迪、中非共和国、卢旺达、南苏丹、坦桑尼亚、乌干达和赞比亚）等冲突地区的矿区、通过走私贸易途径、被非政府武装控制或非法的军事派别控制的金、钽、钨、锡等金属。我们特此声明艾诺所有供给产品皆为无冲突金属之产品，如果有冲突金属用于提供产品时，我们将立即告知并采取替代措施。</div>
    
   </div>
    </div>
  </Container>

</Layout>
<style lang="scss" scoped>
    .list2{
        border: none !important;
        ul{
            border-left: 1px solid rgba(51, 51, 51, 0.2);
            border-right: 1px solid rgba(51, 51, 51, 0.2);
        }
        li{
            border-bottom: 1px solid rgba(51, 51, 51, 0.2);
            font-family: 'Source Han Sans';
        }
    }
    .grid{
        border: 1px solid rgba(51, 51, 51, 0.2);
        &>div+div{
            border-left: 1px solid rgba(51, 51, 51, 0.2);
            border-bottom: 1px solid rgba(51, 51, 51, 0.2);
        }
        &>div:nth-child(1){
            border-bottom: 1px solid rgba(51, 51, 51, 0.2);
        }
        &>div:nth-child(3n+1){
            border-left: none;
        }
    }
.content{
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    .box{
  border-radius: 2px;
box-sizing: border-box;
border: 1px solid rgba(51, 51, 51, 0.2);
padding:49px 34px;
box-sizing: border-box;
li+li{
    border-top: 1px solid #D8D8D8;
}
    }
}
</style>
